<!--
  功能：功能描述
  作者：王代彬
  时间：2021年03月11日 14:02:17
  版本：v1.0
-->
<template>
    <div class="db-iv-table">
        <Form
            ref="formInline"
            :model="formInline"
            inline
            :label-width="formLabelWidth"
            :style="{ textAlign: formAlign }"
        >
            <FormItem
                :label="item.name"
                v-for="(item, index) in formCloumns"
                :key="index"
            >
                <slot
                    :name="'form-' + item.key"
                    v-bind:scope="{ item, form: formInline }"
                >
                    <Input
                        :size="formSize"
                        type="text"
                        v-model="formInline[item.key]"
                        placeholder="请输入"
                    >
                    </Input>
                </slot>
            </FormItem>
            <FormItem>
                <slot name="formBtn" v-bind:scope="{ formInline }">
                    <Button :size="formSize" @click="onFormReset">重置</Button>
                    <Button
                        :size="formSize"
                        type="primary"
                        @click="onFormSubmit"
                        >查询</Button
                    >
                </slot>
            </FormItem>
        </Form>
        <Table
            ref="ivTable"
            :columns="tableColumns"
            :data="tableData"
			v-bind="ivTableProps"
			v-on="$listeners"
        >
            <template
                :slot="item.slot"
                v-for="item in tableColumns"
                slot-scope="scope"
            >
                <slot :name="item.slot" v-bind:scope="scope"></slot>
            </template>
            <template slot="header">
                <slot name="header"></slot>
            </template>

            <template slot="loading">
                <slot name="loading"></slot>
            </template>
            <template slot="footer">
                <slot name="footer"></slot>
            </template>
            <template slot="contextMenu">
                <slot name="contextMenu"></slot>
            </template>
        </Table>
        <Page
            :style="{
                textAlign: ivPageProps.align
            }"
			v-bind="ivPageProps"
			v-on="$listeners"
        />
    </div>
</template>

<script>
export default {
    name: "demo",
    props: {
        formLabelWidth:{
            type:Number,
            default:50
        },
        formAlign: {
            type: String,
            default: "left",
        },
        formSize:{
            type:String
        },
        formCloumns: {
            type: Array,
            default: () => [],
        },
        pageProps: {
            type: Object,
            default: () => {},
        },
        tableColumns: {
            type: Array,
            default: () => [],
        },
        tableProps: {
            type: Object,
            default: () => {},
        },
        tableData: {
            type: Array,
            default: () => [],
        },
    },
    components: {},
    data() {
        return {
            ivPageProps: {
                align: "right",
                current: 1,
                total: 100,
                pageSize: 10,
                pageSizeOpts: [10, 20, 30, 40],
                placement: "bottom",
                simple: false,
                showTotal: true,
                showElevator: true,
                showSizer: true,
                transfer: false,
                disabled: false,
                // prevText:'',
                // nextText:'',
                // size:'',
                // className:'',
                // styles:{},
            },
            ivTableProps: {
                stripe: false,
                border: false,
                showHeader: true,
                loading: false,
                disabledHover: false,
                highlightRow: false,
                noDataText: "暂无数据",
                noFilteredDataText: "暂无筛选结果",
                draggable: false,
                tooltipTheme: "dark",
                tooltipMaxWidth: 300,
                rowKey: false,
                showSummary: false,
                sumText: "合计",
                indentSize: 16,
                updateShowChildren: false,
                contextMenu: false,
                showContextMenu: false,
                // loadData:function(){},
                // summaryMethod:function(){},
                // spanMethod:function(){},
                // size:'',
                // rowClassName:function(){},
                // width:'',
                // height:'',
                // maxHeight:"",
            },
            formInline: {
                user: "",
                password: "",
            },
            initFormData: {},
        };
    },
    filters: {},
    computed: {},
    watch: {},
    methods: {
        onFormReset() {
            this.formInline = JSON.parse(JSON.stringify(this.initFormData));
        },
        onFormSubmit() {
            this.$emit("form-submit", this.formInline);
        },
        exportCsv(obj) {
            this.$refs.ivTable.exportCsv(obj);
        },
        clearCurrentRow() {
            this.$refs.ivTable.clearCurrentRow(obj);
        },
        selectAll(status) {
            this.$refs.ivTable.selectAll(status);
        },
        replaceProps() {
            this.formCloumns.forEach((item) => {
                this.$set(this.formInline, item.key, item.value);
                this.initFormData = JSON.parse(JSON.stringify(this.formInline));
            });
            for (let key in this.tableProps) {
                this.ivTableProps[key] = this.tableProps[key];
            }
            for (let key in this.pageProps) {
                this.ivPageProps[key] = this.pageProps[key];
            }
        },
    },
    created() {
        this.replaceProps();
    }
};
</script> 

<style lang='less' scoped>
.db-iv-table {
    .ivu-form-item {
        margin-bottom: 10px;
    }
    .ivu-page {
        padding: 15px 20px;
    }
}
@import "./index.less";
</style>
